<template lang="html">
    <div>
        <button @click="logout">退出登录</button>
        <div class="arrow"></div>
        <div class="circle"></div>
        <CountA></CountA>
        <CountB></CountB>
        <div class="shadow">

        </div>
        <!-- <router-link :to="'/config/'+name+'/'+age" style="color: blue;">跳转</router-link> -->
        <button @click="goto">goto</button>
    </div>
</template>
<script>
    import CountA from '@/components/CountA';
    import CountB from '@/components/CountB';
export default {
    components:{
        CountA,
        CountB
    },
    data() {
        return {
            name:'cloud',
            age:25
        }
    },
    methods: {
        goto(){
            this.$router.push({name:"config",params:{age:3,name:'cloud'}})
        },
        logout(){
            this.$storage.clearAll();
            this.$router.push('/login');
        }
    },
    mounted() {
        console.log(this.$route.params.name);
    },
}
</script>
<style lang="css">
    .arrow{
        border-width: 30px;
        border-color: transparent;
        border-style: solid;
        border-left-color: rgb(199, 23, 23);
    }
    .circle{
        width:40px;
        height: 40px;
        border: blue solid 30px;
        border-radius: 50%;
    }
    .shadow{
        width: 100px;
        height: 50px;
        border: tomato solid 2px;
        box-shadow: 10px 3px 5px 5px rgba(255,0,0,128);
    }
    /* .circle::after{
        content: '';
        font-size: 0px;
        width: 20px;
        height: 20px;
        position: relative;
        left: -30px;
        border: transparent solid 10px;
    } */
    
</style>